<template>
  <div>
    <Button @click="clear" style="margin-right: 10px">清空</Button>
    <a-dropdown style="margin-left: 10px">
      <Button class="ant-dropdown-link" type="primary">
        保存
        <Icon type="ios-arrow-down"></Icon>
      </Button>
      <template #overlay>
        <a-menu>
          <a-menu-item name="saveImg" @click="saveImg">保存为图片</a-menu-item>
          <a-menu-item name="saveSvg" @click="saveSvg">保存为SVG</a-menu-item>
          <a-menu-item name="saveJson" @click="saveJson" divided>保存为JSON文件</a-menu-item>
          <a-menu-item name="savePNGFootage" @click="savePNGFootage" divided>保存为个人素材(PNG)</a-menu-item>
          <a-menu-item name="saveSVGFootage" @click="saveSVGFootage" divided>保存为个人素材(SVG)</a-menu-item>
    		  <a-menu-item name="saveTemplate" @click="saveTemplate" divided>保存为个人模板</a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
    <a-modal v-model:open="showInput" title="输入名称" @ok="saveWith">
      <div>svg素材不能有背景图片</div>
      <a-input v-model:value="uploadName"/>
    </a-modal>
  </div>
</template>

<script>
import select from '@/mixins/select'
import { v4 as uuid } from 'uuid';
import {Base64} from "js-base64";

export default {
  name: 'saveBar',
  mixins: [select],
  data() {
    return {
      showInput : false,
      uploadName: '',
      saveType: 0,
    };
  },
  methods: {
    saveJson() {
      const dataUrl = this.canvas.c.toJSON(['id'])
      const fileStr = `data:text/json;charset=utf-8,${encodeURIComponent(JSON.stringify(dataUrl, null, '\t'))}`;
      console.log(fileStr)
      this.downFile(fileStr,'json')
    },
    saveSvg() {
      const dataUrl = this.canvas.c.toSVG()
      const fileStr = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(dataUrl)}`;
      console.log(fileStr)
      this.downFile(fileStr,'svg')
    },
    saveImg() {
      const option = { name: 'New Image', format: 'png', quality: 1, multiplier: 2 }
      const dataUrl = this.canvas.c.toDataURL(option)
      this.downFile(dataUrl,'png')
    },
    downFile(fileStr, fileType){
      const anchorEl = document.createElement('a');
      anchorEl.href = fileStr;
      anchorEl.download = uuid() + '.' + fileType;
      document.body.appendChild(anchorEl);
      anchorEl.click();
      anchorEl.remove();
    },
    clear() {
      this.canvas.c.clear();
      this.canvas.c.setBackgroundColor('#fff', this.canvas.c.renderAll.bind(this.canvas.c))
    },
    clipboard() {
      const jsonStr = this.canvas.c.toJSON(['id'])
      this._mixinClipboard(JSON.stringify(jsonStr, null, '\t'))
    },
    saveWith(){
      console.log("123")
      console.log(this.saveType)
      console.log(this.uploadName)
      switch (this.saveType){
        case 1:
          console.log("保存为PNG个人素材")
          // eslint-disable-next-line no-case-declarations
          const PNGOption = { name: 'New Image', format: 'png', quality: 1, multiplier: 2 }
          // eslint-disable-next-line no-case-declarations
          const PNGDataUrl = this.canvas.c.toDataURL(PNGOption)
          console.log(PNGDataUrl)
          this.$http.post('api/posterEditor/addIFootage/',
              {
                img : PNGDataUrl,
                token : this.$store.state.token,
                type : 'png',
                name : this.uploadName,
              },
          ).then( res => {
            if(res.data.code === 0){
              confirm(res.data.message)
            }else{
              confirm('上传成功')
            }
          })
          this.showInput = false
          break
        case 2:
          console.log("保存为SVG个人素材")
          // eslint-disable-next-line no-case-declarations
          const SVGDataUrl = this.canvas.c.toSVG()
          // eslint-disable-next-line no-case-declarations
          const SVGFileStr = `data:image/svg+xml;charset=utf-8,${Base64.encode(SVGDataUrl)}`;
          console.log(SVGFileStr)
          this.$http.post('api/posterEditor/addIFootage/',
              {
                img : SVGFileStr,
                token : this.$store.state.token,
                type : 'svg',
                name : this.uploadName,
              },
          ).then( res => {
            if(res.data.code === 0){
              confirm(res.data.message)
            }else{
              confirm('上传成功')
            }
          })
          this.showInput = false
          break
        case 3:
          console.log("保存为个人模板")
          // eslint-disable-next-line no-case-declarations
          const JSONDataUrl = this.canvas.c.toJSON(['id'])
          // eslint-disable-next-line no-case-declarations
          const JSONFileStr = `data:text/json;charset=utf-8,${Base64.encode(JSON.stringify(JSONDataUrl, null, '\t'))}`;
          // eslint-disable-next-line no-case-declarations
          const IMGOption = { name: 'New Image', format: 'png', quality: 1, multiplier: 2 }
          // eslint-disable-next-line no-case-declarations
          const IMGDataUrl = this.canvas.c.toDataURL(IMGOption)
          console.log(JSONFileStr)
          this.$http.post('api/posterEditor/addITemplate/',
              {
                template : JSONFileStr,
                img : IMGDataUrl,
                token : this.$store.state.token,
                name : this.uploadName,
              },
          ).then( res => {
            if(res.data.code === 0){
              confirm(res.data.message)
            }else{
              confirm('上传成功')
            }
          })
          this.showInput = false
          break
        default:
          break
      }
    },
    savePNGFootage(){
      this.showInput = true
      this.saveType = 1
    },
    saveSVGFootage(){
      this.showInput = true
      this.saveType = 2
    },
    saveTemplate(){
      this.showInput = true
      this.saveType = 3
    }

  }
};
</script>

<style scoped lang="less">
</style>
